{% extends 'layout.html' %}


{% block css %}
{% endblock %}


{% block content %}
    <div class="col-sm-6">
        <div class="panel panel-default">
            <div class="panel-heading">柱状图</div>
            <div class="panel-body">
                <div id="main" style="width: 400px; height: 400px"></div>
                <script type="text/javascript">
                    $(function () {
                        initChart('main', '商品销售详情', '销售数据统计', '{{visualization_type}}', '/system/customize/visualization_show?file={{ file_name }}&x_axis={{ x_axis }}&y_axis={{ y_axis }}&type_axis={{ visualization_type }}', 'y_list');
                    });

                    // 初始化图表的通用函数
                    function initChart(divId, titleText, subTitleText, chartType, url, dataKey) {
                        try {
                            var myChart = echarts.init(document.getElementById(divId));
                            var option = {
                                title: {
                                    text: titleText,
                                    subtext: subTitleText,
                                    left: 'center',
                                    textStyle: {
                                        color: '#333',
                                        fontSize: 18
                                    }
                                },
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        type: 'shadow'
                                    },
                                    formatter: function (params) {
                                        var tooltip = params[0].name + '<br/>';
                                        params.forEach(function (param) {
                                            tooltip += param.seriesName + ': ' + param.value + '<br/>';
                                        });
                                        return tooltip;
                                    }
                                },
                                legend: {
                                    data: ['销量', '销售额'],
                                    top: 'bottom',
                                    left: 'center'
                                },
                                xAxis: {
                                    type: 'category',
                                    data: [],
                                    axisLabel: {
                                        fontSize: 12,
                                        interval: 0,
                                        rotate: 30
                                    },
                                    axisLine: {
                                        lineStyle: {
                                            color: '#999'
                                        }
                                    },
                                    axisTick: {
                                        show: false
                                    }
                                },
                                yAxis: {
                                    type: 'value',
                                    axisLabel: {
                                        fontSize: 12
                                    },
                                    axisLine: {
                                        lineStyle: {
                                            color: '#999'
                                        }
                                    },
                                    axisTick: {
                                        show: false
                                    },
                                    splitLine: {
                                        lineStyle: {
                                            color: ['#eee']
                                        }
                                    }
                                },
                                series: [
                                    {
                                        name: '销量',
                                        type: 'bar',
                                        data: [],
                                        itemStyle: {
                                            color: '#5470c6'
                                        }
                                    },
                                    {
                                        name: '销售额',
                                        type: 'bar',
                                        data: [],
                                        itemStyle: {
                                            color: '#91cc75'
                                        }
                                    }
                                ]
                            };

                            if (chartType === 'line') {
                                option.series = [
                                    {
                                        name: '价格',
                                        type: 'line',
                                        data: [],
                                        itemStyle: {
                                            color: '#5470c6'
                                        }
                                    }
                                ];
                            }
                            ;
                            if (chartType === 'scatter') {
                                option.series = [
                                    {
                                        name: '价格',
                                        type: 'scatter',
                                        data: [],
                                        itemStyle: {
                                            color: '#5470c6'
                                        }
                                    }
                                ];
                            }


                            $.ajax({
                                url: url,
                                type: "get",
                                dataType: "JSON",
                                success: function (res) {
                                    try {
                                        if (res.status && res.data && res.data.x_list && res.data[dataKey]) {
                                            option.xAxis.data = res.data.x_list;
                                            option.series = res.data[dataKey];
                                            myChart.setOption(option);
                                        } else {
                                            console.error('无效的响应数据');
                                        }
                                    } catch (e) {
                                        console.error('设置图表选项时出错:', e);
                                    }
                                },
                                error: function (xhr, status, error) {
                                    console.error('AJAX 请求失败:', error);
                                    alert('数据加载失败，请稍后重试');
                                }
                            });
                        } catch (e) {
                            console.error('初始化图表时出错:', e);
                        }
                    }
                </script>
            </div>
        </div>
    </div>
{% endblock %}